<template>
  <ul>
    <li v-for="(item, index) in list" :key="item.id">
      <a :href="item.href">
        {{ item.content }}
      </a>
    </li>
  </ul>
</template>

<script setup>
import { reactive, defineProps } from "vue";

const props = defineProps({
  list: {
    type: Array,
    default: [],
  },
});
const state = reactive({});
</script>

<style lang="scss" scoped>
ul {
  width: 200px;
  border: 1px solid #369;
  box-shadow: 0 0 3px #369;
  li {
    cursor: pointer;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #cccccc;
    &:nth-last-of-type(0) {
      border-bottom: none;
    }
    a {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
}
</style>
